<template>
  <div class="box">
    <div class=" mb-5">
        <div class="font-bold text-2xl">學生/課程</div>
        <!-- <div class="flex mt-2 ml-5">
            <span class="item-label">職員 / 教師資料</span>
            <span class="item-tag"></span>
            <div class="flex " v-if="option.teacher">
                <el-input class="item-chunk-name" :disabled="option.teacher.isEdit" v-model="option.teacher.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="option.teacher.isEdit" v-model="option.teacher.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('teacher',option)">{{option.teacher.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div> -->
<!--  -->
        <div class="flex mt-2 ml-5">
            <span class="item-label">學生資料</span>
            <span class="item-tag">(學生)</span>
            <div class="flex " v-if="lists.x">
                <el-input class="item-chunk-name" :disabled="lists.x.isEdit" v-model="lists.x.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.x.isEdit" v-model="lists.x.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('x',lists)">{{lists.x.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>
<!--  -->
        <!-- <div class="flex mt-2 ml-5">
            <span class="item-label">供應商資料</span>
            <span class="item-tag"></span>
            <div class="flex " v-if="option.supplier">
                <el-input class="item-chunk-name" :disabled="option.supplier.isEdit" v-model="option.supplier.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="option.supplier.isEdit" v-model="option.supplier.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('supplier',option)">{{option.supplier.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div> -->
<!--  -->
        <div class="flex mt-2 ml-5">
            <span class="item-label">課程資料</span>
            <span class="item-tag">(課程)</span>
            <div class="flex " v-if="lists.k">
                <el-input class="item-chunk-name" :disabled="lists.k.isEdit" v-model="lists.k.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.k.isEdit" v-model="lists.k.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('k',lists)">{{lists.k.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>
<!--  -->
            <div class="flex mt-2 ml-5">
            <span class="item-label">產品資料</span>
            <span class="item-tag">(產品)</span>
            <div class="flex " v-if="lists.p">
                <el-input class="item-chunk-name" :disabled="lists.p.isEdit" v-model="lists.p.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.p.isEdit" v-model="lists.p.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('p',lists)">{{lists.p.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>
        <div class="flex mt-2 ml-5">
            <span class="item-label">產品組合</span>
            <span class="item-tag"></span>
            <div class="flex " v-if="lists.g">
                <el-input class="item-chunk-name" :disabled="lists.g.isEdit" v-model="lists.g.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.g.isEdit" v-model="lists.g.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('g',lists)">{{lists.g.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>
    <div class="font-bold text-2xl mt-5">發票</div>
        <div class="flex mt-2 ml-5">
            <span class="item-label">套票</span>
            <span class="item-tag"></span>
            <div class="flex " v-if="lists.t">
                <el-input class="item-chunk-name" :disabled="lists.t.isEdit" v-model="lists.t.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.t.isEdit" v-model="lists.t.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('t',lists)">{{lists.t.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>
        <div class="flex mt-2 ml-5">
            <span class="item-label">發票</span>
            <span class="item-tag"></span>
            <div class="flex " v-if="lists.f">
                <el-input class="item-chunk-name" :disabled="lists.f.isEdit" v-model="lists.f.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.f.isEdit" v-model="lists.f.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('f',lists)">{{lists.f.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>
        <div class="flex mt-2 ml-5">
            <span class="item-label">收款</span>
            <span class="item-tag"></span>
            <div class="flex " v-if="lists.s">
                <el-input class="item-chunk-name" :disabled="lists.s.isEdit" v-model="lists.s.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.s.isEdit" v-model="lists.s.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('s',lists)">{{lists.s.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>
        <div class="flex mt-2 ml-5">
            <span class="item-label">退款</span>
            <span class="item-tag"></span>
            <div class="flex " v-if="lists.tk">
                <el-input class="item-chunk-name" :disabled="lists.tk.isEdit" v-model="lists.tk.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.tk.isEdit" v-model="lists.tk.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('tk',lists)">{{lists.tk.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>
        <div class="font-bold text-2xl mt-5">倉庫</div>
        <div class="flex mt-2 ml-5">
            <span class="item-label">倉庫</span>
            <span class="item-tag"></span>
            <div class="flex " v-if="lists.r">
                <el-input class="item-chunk-name" :disabled="lists.r.isEdit" v-model="lists.r.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.r.isEdit" v-model="lists.r.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('r',lists)">{{lists.r.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>
        <div class="flex mt-2 ml-5">
            <span class="item-label">出倉</span>
            <span class="item-tag"></span>
            <div class="flex " v-if="lists.c">
                <el-input class="item-chunk-name" :disabled="lists.c.isEdit" v-model="lists.c.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.c.isEdit" v-model="lists.c.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('c',lists)">{{lists.c.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>
        <div class="flex mt-2 ml-5">
            <span class="item-label">轉倉</span>
            <span class="item-tag"></span>
            <div class="flex " v-if="lists.z">
                <el-input class="item-chunk-name" :disabled="lists.z.isEdit" v-model="lists.z.name" size="small"></el-input>
                <el-input class="item-chunk-num"  :disabled="lists.z.isEdit" v-model="lists.z.number"  size="small"></el-input>
                <el-button type="primary" size="small" @click="onSetInfo('z',lists)">{{lists.z.isEdit ? '編輯' :'確認' }}</el-button>
            </div>
        </div>

    </div>
    
  </div>
</template>

<script setup>
import { reactive, ref ,onMounted} from "vue";
import {number,numberUpdate} from '@/http/index.js'
import {message} from '@/common/function.js'

const onSetInfo = async (type,value) => {
  console.log(type,value,'111111');
  let obs = lists[type]
//   console.log(obs.isEdit);
if (!obs.isEdit) {
    console.log(123);
    const data = await numberUpdate(obs.id,obs.number)
    console.log(data);
    if (data.code == 200) {
        tableList()
        message('修改编号成功')
    }
}
  lists[type].isEdit = !lists[type].isEdit
  console.log(lists[type].isEdit);
};

const lists = reactive({});
const tableList = async () => {
  const data = await number();
  console.log(data);
  if (data.code == 200) {
    data.data.map((e) => {
      lists[e.type] = e;
      lists[e.type]["isEdit"] = true;
      lists[e.type]["isDisable"] = true;
    });
  }
};
onMounted(() => {
    tableList()
})
</script>

<style lang='less'  scoped>
.box {
  max-width: 1100px;
  padding: 15px;
  margin:30px auto;
  border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
}

.item-label{
        width: 180px;
    font-size: 14px;
    color: #646464;
}
.item-tag{
       width: 120px;
    font-size: 14px;
    color: #BBBBBB;
}
.item-chunk-name{
    width: 70px;
}
.item-chunk-num{
    width: 100px;
}
</style>